<template lang="pug">
  div
    header
      div.headBox
        div.logo
          img.logoImg(src="/static/Index/uu1.gif")
        nav
          router-link(v-bind:to="{name:'Index'}")
            span 首页
          router-link(v-bind:to="{name:'PublicCourse'}")
            span 公开课
          router-link(v-bind:to="{name:'ExcellentCourse'}")
            span.pidtu 精品课
          router-link(v-bind:to="{name:'WeChatCourse'}")
            span 微课
          router-link(v-bind:to="{name:'LiveBroadcastCourse'}")
            span.pidtu 直播课
          router-link(v-bind:to="{name:'PrivatePlay'}")
            span 私播课
        div.searchBox
          div.search
            div.inputBox
              input(type="text" v-model="sousuo" placeholder="请输入课程类型、课程类别、课程名称或授课教师" onfocus="this.placeholder=''" onblur="this.placeholder='请输入课程类型、课程类别、课程名称或授课教师'")
            div( ref="link").searchBtn
              router-link(v-bind:to="{name:'SearchPage'}")
                span
                  img(src="/static/index/搜索_u288.png")
                span 搜索
        div.loginBox
          div
            img(src="/static/index/头像_u282.png")
            router-link(v-bind:to="{name:'Logon'}").loginRng#enter 登 录
            span |
            router-link(v-bind:to="{name:'Register'}").loginRng#enroll 注 册

</template>

<script type="text/ecmascript-6">

  export default {
    name: 'KalixHeader',
    data() {
      // var validateEmail = (rule, value, callback) => {}
      return {
        loginFormModel: {
          name: '',
          password: ''
        },
        sousuo: '',
        status: 'login',
        centerName: '',
        registFormModel: {
          name: '',
          password: '',
          passwordAgain: '',
          email: '',
          loginName: ''
        }
      }
    },
    methods: {
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  header
    width 100%
    height 80px
    box-shadow 0px 5px 10px #ddd
    margin-bottom 20px

  .headBox
    width 1200px
    min-width 1200px
    height 100%
    margin 0 auto

  .logo
    width 100px
    height 100%
    float left

  .logoImg
    width 100%
    height 100%

  nav
    float left
    margin-left 40px
    height 80px
    line-height 86px
    font-size 16px

  nav span
    padding 0 20px
    font-size 16px

  nav span:hover
    color #ff9933

  nav .pidtu
    position: relative

  nav .pidtu img
    position: absolute
    right -6px
    top -10px

  .searchBox
    float left
    padding-top 28px
    margin-left 15px
    position relative

  .search
    width 366px
    height 28px
    border 1px solid #ccc
    border-radius 25px
    padding-left 20px

  .inputBox input
    border none
    width 286px
    font-size 12px
    height 26px
    outline none

  .inputBox
    display inline-block

  .searchBtn
    width 80px
    height 28px
    padding-left 12px
    line-height 28px
    text-align center
    /*display inline-block*/
    background-color #FF9933
    border-radius 25px
    float right
    color #fff
    cursor pointer
    box-sizing border-box
    /*position absolute*/
    /*top 0*/
    /*right 0*/

  .searchBtn span
    padding 0 3px
    float left
    height 28px
    line-height 28px
    display inline-block
    color #fff
    font-size 14px

  .searchBtn img
    width 15px
    height 15px
    margin-top 7px

  .loginBox
    display inline-block
    margin-left 21px
    padding-top 28px
    font-size 18px

  .loginBox a
    display inline-block
    height 28px
    float left
    line-height 28px
    padding 0 3px
    max-width 81px
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .loginBox span
    display inline-block
    float left
    height 28px
    line-height 28px

  .loginBox img
    display inline-block
    float left
    width 20px
    height 22px
    margin-top 3px

  .loginRng
    cursor pointer

  .loginRng:hover
    color #ff9933

</style>
